<!-- evaluate 订单评价 -->
<template>
  <div class="content">
    <el-form :model="query" ref="form" size="medium" class="search-form">
      <el-form-item>
        <el-input v-model="query.productName" placeholder="请输入商品名称" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-input v-model="query.keyword" placeholder="请输入商品分类" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-input v-model="query.nickName" placeholder="请输入用户艺名" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label-width="10px">
        <Cbutton @click="handleSearch" size="medium" :btnloading="tableLoading">查询</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <el-dropdown size="medium" type="primary">
          <el-button type="primary">
            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleBatchOpr(1)">显示评价</el-dropdown-item>
            <el-dropdown-item @click.native="handleBatchOpr(2)">隐藏评价</el-dropdown-item>
            <el-dropdown-item @click.native="handleBatchOpr(3)">删除评价</el-dropdown-item>
          </el-dropdown-menu>

        </el-dropdown>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit stripe @selection-change="handleSelectionChange">>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="orderSn" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="nickname" label="用户艺名" align="center"></el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="star" label="评价" align="center" min-width="100">
          <template slot-scope="props">
            <!-- rgb(128, 128, 128) -->
            <el-rate v-model="props.row.star" disabled void-color="#bcc1cc" disabled-void-color="#bcc1cc"></el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="评论时间" align="center">
          <template slot-scope="props">
            <span>{{props.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否显示" align="center">
          <template slot-scope="props">
            <el-tag v-if="props.row.status" size="small" type="success">显示</el-tag>
            <el-tag v-else size="small" type="info">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="props">
            <el-link type="primary" @click="handleDetail(props.row)">详情 &nbsp;</el-link>
            <el-link v-if="!props.row.status" type="primary" @click="handleHide(props.row, 1)">显示 &nbsp;</el-link>
            <el-link v-if="props.row.status" type="warning" @click="handleHide(props.row, 2)">隐藏 &nbsp;</el-link>
            <el-link type="danger" @click="handleRemove(props.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

  </div>
</template>

<script>
import { GetOrderCommentList, OrderCommentHide } from '@/api/order'

export default {
  name: 'evaluate',
  components: {},
  data () {
    return {
      activeName: '9',
      query: {
        nickName: '',
        productName: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false
    } // return
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    handleSelectionChange (selection) {
      this.tableSelectList = selection
    },
    getList () {
      this.tableLoading = true
      let params = JSON.parse(JSON.stringify(this.query))
      GetOrderCommentList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleDetail (row) {
      this.$router.push({ name: 'pms:order:evaluate:detail', id: row.id })
    },
    handleHide (row, type) {
      let params = {
        status: false,
        commentId: row.id
      }
      let str = '显示'
      if (type === 1) {
        params.status = true
        str = '显示'
      } else {
        params.status = false
        str = '隐藏'
      }
      this.$confirm(`确定要${str}选择的评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        OrderCommentHide(params).then(res => {
          this.$message.success(res.data || res.msg || '操作成功')
          this.getList()
        }).catch(e => { })
      }).catch(() => { })
    },
    handleBatchOpr (val) {
      let str = '批量删除'
      if (val === 1) str = '批量显示'
      if (val === 2) str = '批量隐藏'
      if (val === 3) str = '批量删除'
      this.$confirm(`确定要${str}选择的评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => { })
    },
    handleRemove (val) {
      let str = '删除'
      this.$confirm(`确定要${str}选择的评论吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => { })
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }

  }
}

</script>
<style lang='scss' scoped>
</style>
